<template>
  <div class="container">
    <div class="bread">
      <ul>
        <li>全部结构</li>
        <li>></li>
        <li>厨房电器</li>
      </ul>
    </div>
    <div class="filter">
      <div class="filterTitle">
        <h4>品牌</h4>
        <div class="filterContent">
          <ul class="filterContentImg">
            <li>
              <img src="images/1.png" />
              <div class="filterContentImgTitle">1</div>
            </li>
            <li>
              <img src="images/2.png" />
              <div class="filterContentImgTitle">1</div>
            </li>
            <li>
              <img src="images/3.png" />
              <div class="filterContentImgTitle">1</div>
            </li>
            <li>
              <img src="images/4.png" />
              <div class="filterContentImgTitle">1</div>
            </li>
          </ul>
        </div>
        <button>+ 多选</button>
      </div>
      <div class="filterCategory">
        <h4>品牌</h4>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
      <div class="filterGroup">
        <h4>放置方式</h4>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </div>

    <div class="sortBar">
      <div class="opGeneral"><span>综合</span></div>
      <div class="opPrice"><span>价格</span></div>
    </div>
    <div class="goodsItem"></div>
  </div>
</template>

<script>
export default {
  name: 'Search',
}
</script>

<style lang="less">
* {
  margin: 0;
  ul {
    list-style-type: none;
  }
  color: black;
}

.container {
  width: 80%;
  height: 900px;
  box-sizing: border-box;
  margin: 20px auto;
  .bread {
    height: 40px;
    ul {
      li {
        float: left;
      }
    }
  }
  .filter {
    border: 1px solid black;
    height: 250px;
    .filterTitle {
      width: 100%;
      height: 95px;
      border-bottom: 1px dashed;
      h4 {
        float: left;
      }
      ul {
        margin-left: 30px;
        li {
          float: left;
          .filterContentImgTitle {
            display: none;
          }
          img {
            width: 80px;
            height: 40px;
          }
        }
      }
      button {
        float: right;
        width: 68px;
        height: 32px;
      }
    }
    .filterCategory {
      border-bottom: 1px dashed;
      height: 64px;
      h4 {
        float: left;
      }
      ul {
        li {
          float: left;
          margin-right: 50px;
        }
      }
    }
    .filterGroup {
      border-bottom: 1px dashed;
      height: 64px;
      h4 {
        float: left;
      }
      ul {
        li {
          float: left;
        }
      }
    }
  }
  .sortBar {
    margin-top: 30px;
    width: 100%;
    background-color: #f5f5f5;
    .opGeneral {
      float: left;
    }
    .opPrice {
      float: left;
    }
  }
}
</style>
